<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div class="app-container">
    <div class="abstatic-height"></div>
    <!-- 边框组件 -->
    <div class="exceptionRecord_main">
      <div class="exceptionRecord_main_left">
          <el-row>
            <div style="margin-bottom: 10px;">
              <el-radio-group v-model="radioType" @change="switchTable" style="margin-bottom:10px;">
                <el-radio-button label="now">当前报警</el-radio-button>
                <el-radio-button label="Fire_alarm"
                  >火警处理记录</el-radio-button
                >
                <el-radio-button label="fault">故障处理记录</el-radio-button>
              </el-radio-group>
              <div class="search">
                <span>报警类型</span>
                <el-select
                  v-model="listQuery.alrmType"
                  filterable
                  placeholder="请选择"
                  @change="restpage"
                  size="mini"
                >
                  <el-option label="全部" value=""></el-option>
                  <el-option
                    v-for="(item, index) in alrmTypeList"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                <span style="margin-left: 20px">报警时间</span>
                <el-date-picker
                  v-model="listQuery.dateStrs"
                  size="mini"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="—"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 240px"
                ></el-date-picker>
                <el-button
                  class="filter-item"
                  type="primary"
                  :disabled="isadvance"
                  size="mini"
                  @click="handleFilter"
                  >查询</el-button
                >
                <el-popover
                  placement="bottom"
                  width="400"
                  v-model="isadvance"
                  trigger="click"
                >
                  <el-button
                    class="filter-item"
                    type="text"
                    size="mini"
                    slot="reference"
                    @click.stop="isadvance = true"
                    ><span style="color: #2BDEF5">高级查询</span></el-button
                  >
                  <div class="advancequery">
                    <el-form
                      :model="formLabelAlign"
                      ref="searchForm"
                      :rules="advancerules"
                      label-width="100px"
                      label-position="top"
                    >
                      <el-form-item label="建筑物" prop="bName">
                        <el-select
                          v-model="formLabelAlign.bName"
                          filterable
                          placeholder="全部"
                          style="width: 100%"
                        >
                          <el-option
                            v-for="(item, index) in buildList"
                            :key="index"
                            :label="item"
                            :value="item"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="系列" prop="equipmentType">
                        <el-select
                          v-model="formLabelAlign.equipmentType"
                          filterable
                          placeholder="全部"
                          style="width: 100%"
                        >
                          <el-option
                            v-for="(item, index) in series"
                            :key="index"
                            :label="item"
                            :value="item"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="设备编号" prop="sensorNo">
                        <el-input
                          v-model.trim="formLabelAlign.sensorNo"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="楼层" prop="floor">
                        <el-input
                          v-model.trim="formLabelAlign.floor"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="位置描述" prop="positionDescription">
                        <el-input
                          v-model.trim="formLabelAlign.positionDescription"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="处理人"
                        prop="handlePerson"
                        v-if="
                          radioType === 'fault' || radioType === 'Fire_alarm'
                        "
                      >
                        <el-input
                          v-model.trim="formLabelAlign.handlePerson"
                        ></el-input>
                      </el-form-item>
                      <el-form-item>
                        <el-button
                          type="primary"
                          @click="handleAdvaceSerach('searchForm')"
                          size="mini"
                          >查询</el-button
                        >
                        <el-button @click="resetForm('searchForm')" type="text"
                          >取消</el-button
                        >
                      </el-form-item>
                    </el-form>
                  </div>
                </el-popover>
              </div>
            </div>
          </el-row>
        <border-warp width-auto>
          <div class="exceptionRecord_main_left_table">
            <el-table
              :data="list"
              :key="tableKey"
              v-loading.body="listLoading"
              style="width: 100%"
            >
              <el-table-column label="建筑名">
                <template slot-scope="scope">
                  <span>{{ scope.row.bName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="设备编号">
                <template slot-scope="scope">
                  <span>{{ scope.row.sensorNo }}</span>
                </template>
              </el-table-column>
              <el-table-column label="系列">
                <template slot-scope="scope">
                  <span>{{ scope.row.equipmentType }}</span>
                </template>
              </el-table-column>
              <el-table-column label="楼层">
                <template slot-scope="scope">
                  <span>{{ scope.row.floor }}</span>
                </template>
              </el-table-column>
              <el-table-column label="位置描述">
                <template slot-scope="scope">
                  <span>{{ scope.row.positionDescription }}</span>
                </template>
              </el-table-column>
              <el-table-column label="测点">
                <template slot-scope="scope">
                  <span>{{ scope.row.unit }}</span>
                </template>
              </el-table-column>
              <el-table-column label="报警类型">
                <template slot-scope="scope">
                  <span
                    :class="{
                      fire: scope.row.alrmCategory == 1,
                      break: scope.row.alrmCategory == 0,
                    }"
                    >{{ scope.row.alrmType }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column label="报警时间">
                <template slot-scope="scope">
                  <span>{{ scope.row.alrmDate }}</span>
                </template>
              </el-table-column>
              <!-- row1 -->
              <el-table-column label="处理人" v-if="radioType === 'Fire_alarm'">
                <template slot-scope="scope">
                  <span>{{ scope.row.confirPerson }}</span>
                </template>
              </el-table-column>
              <el-table-column label="处理人" v-if="radioType === 'fault'">
                <template slot-scope="scope">
                  <span>{{ scope.row.handlePerson }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="处理时间"
                v-if="radioType === 'Fire_alarm'"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.confirDate }}</span>
                </template>
              </el-table-column>
              <el-table-column label="处理时间" v-if="radioType === 'fault'">
                <template slot-scope="scope">
                  <span>{{ scope.row.handleDate }}</span>
                </template>
              </el-table-column>
              <el-table-column label="平面图" v-if="planSetup == 1">
                <template slot-scope="scope">
                  <span class="img" @click="viewimg(scope.row, scope.row.floor)"
                    >查看平面图</span
                  >
                </template>
              </el-table-column>
              <!-- row1 -->
              <el-table-column
                label="处理结果"
                v-if="radioType === 'Fire_alarm'"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.fireFlag">{{
                    scope.row.fireFlag == 1
                      ? "真实火警"
                      : scope.row.fireFlag == 2
                      ? "火警测试"
                      : "误报"
                  }}</span>
                  <span v-else></span>
                </template>
              </el-table-column>
              <el-table-column
                label="是否处理"
                fixed="right"
                v-if="radioType === 'now'"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="handleAlarm(scope.row)"
                    >处理
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div v-show="!listLoading" class="pagination-container">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="listQuery.page"
                :page-sizes="[15, 20, 30, 50]"
                :page-size="listQuery.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="
                  listQuery.tag == 0
                    ? total
                    : listQuery.tag == 1
                    ? totalfire
                    : totalbreak
                "
              >
              </el-pagination>
            </div>
          </div>
        </border-warp>
      </div>
      <div class="borderContent">
        <div class="borderContent_type">
          <title-warp :title="'设备实时状态'">
            <div class="border_message">
              <div class="border_message_num">
                <border-cont :num="countList.realFire"
                  :type="'真实火警'"
                  :color="'bottom,#FF6574,#FA4F6C,#F53563'">
                </border-cont>
              </div>
              <div class="border_message_num">
                <border-cont :num="countList.falseFire"
                  :type="'误报火警'"
                  :color="'bottom,#F8BA67,#E69E3F,#D58824'">
                </border-cont>
              </div>
              <div style="margin-top: 10px" class="border_message_num">
                <border-cont :num="countList.faultAlarm"
                  :type="'故障报警'"
                  :color="'bottom,#87DCFE,#4EC6FE,#02A4F9'">
                </border-cont>
              </div>
            </div>
          </title-warp>
        </div>

        <div class="borderContent_bottom">
          <border-warp :title="'报警趋势'">
            <div class="border_message">
              <div style="width: 480px" id="record_chart"></div>
            </div>
          </border-warp>
        </div>
        <br />
      </div>
    </div>

    <!-- 底部导航 -->
    <bottom-nav :active="1" :routeData="$route.params.id" :routeMatched="$route.matched[0].path"></bottom-nav>

    <planDialog
      :Show.sync="realtimePointShow"
      :buildId.sync="buildId"
      :channelId.sync="params.channelId"
      :newfloor.sync="newfloor"
    ></planDialog>

    <el-dialog
      title="处理提示"
      :visible.sync="isdelalram"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      custom-class="xf-jc-dialog"
      width="360px"
      height="160px"
    >
      <div class="xf-jc-deletect">
        <el-radio-group v-model="switchalramtype" v-if="alarmtype == 1">
          <el-radio label="1">真实火警</el-radio>
          <el-radio label="2">火警测试</el-radio>
          <el-radio label="0">误报</el-radio>
        </el-radio-group>
        <p v-else>当前故障确认已处理吗？</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" round size="medium" @click="handleSure"
          >确定</el-button
        >
        <el-button round size="medium" @click="isdelalram = false"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import echarts from "echarts";
import clip from "@/utils/clipboard"; // use clipboard directly
import planDialog from "@/views/device/realtimeMonit/components/realtimePoints";
import BottomNav from "@/components/BottomNav";
import {
  selectCount,
  selectAlrmType,
  pageList,
  selectCountByBuild,
  selectCountChart,
  getSelected,
  changeRsolve,
  changeFireRsolve,
} from "@/api/device/exceptionRecord/index";

export default {
  components: {
    planDialog,
    BottomNav
  },
  data() {
    return {
      tableKey: 0,
      isdelalram: false,
      realtimePointShow: false,
      switchalramtype: "1",
      radioType: "now",
      countList: "",
      alrmTypeList: [],
      series: [],
      buildList: "",
      isadvance: false,
      list: [],
      total: null,
      totalfire: null,
      totalbreak: null,
      listLoading: true,
      alarmtype: "",
      listQuery: {
        page: 1,
        limit: 15,
        tag: 0,
        alrmType: "",
        dateStrs: null,
        bName: null, //建筑物
        equipmentType: null, //系列
        sensorNo: null, //设备编号
        floorId: null, //楼层
        positionDescription: null, //位置
        handlePerson: null, //处理人
        //channelId:null //每个接口必传的参数，路由的值
      },
      count: "",
      form: {
        name: "",
        region: "",
        type: "",
      },
      formLabelAlign: {
        bName: null,
        equipmentType: null,
        sensorNo: null,
        floor: null,
        positionDescription: null,
        handlePerson: null,
      },
      advancerules: {},
      params: {
        channelId: "",
      },
      buildId: "",
      newfloor: 1,
      planSetup: "0",
    };
  },
  mounted() {
    this.fetchData();
    // let mainWidth = document.querySelector(".record-top-wrap").offsetWidth;
    // let leftWidth = document.querySelector(".record-items-left").offsetWidth;
    // document.querySelector(".record-items-right").style.width =
    //   mainWidth - leftWidth + "px";
  },
  methods: {
    fetchData() {
      let vm = this;
      vm.params.channelId = vm.$route.params.id;
      vm.listQuery.dateStrs = null;
      vm.restsAdvanc();
      vm.type({ alrmCategory: "", handleFlag: "" });
      vm.getList();
      vm.buildCount();
      vm.alrmType();
      vm.initChart();
      this.$store.dispatch("getImgAuth").then(() => {
        this.planSetup = this.$store.getters.planSetup;
      });
    },
    handleCopy(text, event) {
      clip(text + "", event);
    },
    changeSwitch(val) {
      changeRsolve(val.id).then((res) => {
        if (res.status === 200) {
          this.$notify({
            title: "成功",
            message: "处理成功",
            type: "success",
            duration: 2000,
          });
        }
      });
    },
    handleAlarm(row) {
      this.rowdata = row;
      this.alarmtype = row.alrmCategory;
      this.isdelalram = true;
    },
    handleSure() {
      if (this.alarmtype == 1) {
        //火警
        changeFireRsolve(
          this.$qs.stringify({
            id: this.rowdata.id,
            flag: this.switchalramtype,
          })
        )
          .then((res) => {
            if (res.status === 200) {
              this.$notify({
                title: "成功",
                message: "处理成功",
                type: "success",
                duration: 2000,
              });
              this.isdelalram = false;
              this.getList();
            }
          })
          .catch((res) => {
            this.$notify({
              title: "提示",
              message: "网络异常！",
              type: "warning",
              duration: 2000,
            });
            this.isdelalram = false;
          });
      } else {
        //故障
        changeRsolve(this.$qs.stringify({ id: this.rowdata.id }))
          .then((res) => {
            if (res.status === 200) {
              this.$notify({
                title: "成功",
                message: "处理成功",
                type: "success",
                duration: 2000,
              });
              this.isdelalram = false;
              this.getList();
            }
          })
          .catch((res) => {
            this.$notify({
              title: "提示",
              message: "网络异常！",
              type: "warning",
              duration: 2000,
            });
            this.isdelalram = false;
          });
      }
    },
    //报警类型
    type(type) {
      let alarmtype = type || {};
      selectAlrmType(
        Object.assign({}, this.listQuery, this.params, alarmtype)
      ).then((res) => {
        this.alrmTypeList = res.data;
      });
    },
    //饼状图
    initChart() {
      selectCount(Object.assign({}, this.listQuery, this.params)).then(
        (res) => {
          // console.log(res.data);
          this.countList = res.data;
          selectCountChart(this.params).then((res) => {
            let charData = res.data;
            var chart = echarts.init(document.getElementById("record_chart"));
            var option = {
              grid: {
                left: "10%",
                right: "6%",
                bottom: 20,
                top: 40,
              },
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "cross",
                  label: {
                    backgroundColor: "#6a7985",
                  },
                },
              },
              legend: {
                // icon: "line",
                // orient: "vertical",
                textStyle: {
                  color: "rgba(80, 227, 194, 0.7)",
                },
                itemWidth: 15,
                itemHeight: 15,
                itemGap: 20,
                // left: "right",
                // align: 'right',
                // top: -50,
                right: 10,
                // top: "top",
                data: ["火警", "误报", "故障"],
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: charData.months,
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: "rgba(80, 227, 194, 0.3)",
                  },
                },
              },
              yAxis: {
                type: "value",
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: "rgba(80, 227, 194, 0.3)",
                  },
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "rgba(80, 227, 194, 0.3)",
                  },
                },
              },
              color: ["#E4393C", "#2CB9FF", "#FFAF40"],
              series: [
                {
                  type: "line",
                  name: "火警",
                  smooth: true,
                  symbol: "none",
                  showAllSymbol: true,
                  sampling: "average",
                  itemStyle: {
                    normal: {
                      color: "#E4393C",
                    },
                  },
                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#E4393C",
                        },
                        {
                          offset: 1,
                          color: "rgba(0,0,0,0)",
                        },
                      ]),
                    },
                  },
                  data: charData.alarmCount,
                },
                {
                  type: "line",
                  name: "误报",
                  smooth: true,
                  symbol: "none",
                  showAllSymbol: true,
                  sampling: "average",
                  itemStyle: {
                    normal: {
                      color: "#2CB9FF",
                    },
                  },
                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#2CB9FF",
                        },
                        {
                          offset: 1,
                          color: "rgba(0,0,0,0)",
                        },
                      ]),
                    },
                  },
                  data: charData.notAlarmCount,
                },
                {
                  type: "line",
                  smooth: true,
                  symbol: "none",
                  name: "故障",
                  showAllSymbol: true,
                  sampling: "average",
                  itemStyle: {
                    normal: {
                      color: "#FFAF40",
                    },
                  },
                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#FFAF40",
                        },
                        {
                          offset: 1,
                          color: "rgba(0,0,0,0)",
                        },
                      ]),
                    },
                  },
                  data: charData.faultCount,
                },
              ],
            };
            chart.setOption(option);
          });
        }
      );
    },
    restpage() {
      //切换类时重置分页
      this.listQuery.limit = 15;
      this.listQuery.page = 1;
    },
    switchTable() {
      // 切换按钮时重置分页查询条件
      this.listQuery.typeName = undefined;
      this.listQuery.type = undefined;
      this.listQuery.alrmType = "";
      this.listQuery.dateStrs = null;
      if (this.radioType == "now") {
        this.listQuery.tag = 0;
        this.listQuery.limit = 15;
        this.listQuery.page = 1;
        this.tableKey = 0;
        this.getList();
        this.type({ alrmCategory: "", handleFlag: "" });
      } else if (this.radioType == "Fire_alarm") {
        this.listQuery.tag = 1;
        this.listQuery.limit = 15;
        this.listQuery.page = 1;
        this.tableKey = 1;
        this.getList();
        this.type({ alrmCategory: "1", handleFlag: "1" });
      } else {
        this.listQuery.tag = 2;
        this.listQuery.limit = 15;
        this.listQuery.page = 1;
        this.tableKey = 2;
        this.getList();
        this.type({ alrmCategory: "0", handleFlag: "1" });
      }
    },
    //获取表格所有的内容
    getList() {
      this.listLoading = true;
      let dateStrs;
      this.list = [];
      this.listfire = [];
      this.listbreak = [];
      if (this.listQuery.dateStrs) {
        dateStrs = this.listQuery.dateStrs.toString();
      }
      pageList(
        Object.assign({}, this.listQuery, this.params, { dateStrs: dateStrs })
      ).then((response) => {
        if (this.listQuery.tag == 0) {
          this.total = response.data.total;
          this.listLoading = false;
        } else if (this.listQuery.tag == 1) {
          this.totalfire = response.data.total;
          this.listLoading = false;
        } else {
          this.totalbreak = response.data.total;
          this.listLoading = false;
        }
        this.list = response.data.rows;
      });
    },
    //高级查询条件-建筑物
    buildCount() {
      selectCountByBuild(Object.assign({}, this.listQuery, this.params)).then(
        (res) => {
          this.buildList = res.data.bname;
        }
      );
    },
    //高级查询条件-系列
    alrmType() {
      getSelected(Object.assign({}, this.listQuery, this.params)).then(
        (res) => {
          this.series = res.data.equipmentType;
        }
      );
    },
    //  重置查询条件
    restsAdvanc() {
      this.listQuery.bName = undefined;
      this.listQuery.equipmentType = undefined;
      this.listQuery.sensorNo = undefined;
      this.listQuery.floorId = undefined;
      this.listQuery.positionDescription = undefined;
      this.listQuery.confirPerson = undefined;
      this.listQuery.handlePerson = undefined;
    },
    //根据类型,时间查询
    handleFilter() {
      this.restsAdvanc();
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    //高级查询里面的查询
    handleAdvaceSerach(formName) {
      const set = this.$refs;
      this.listQuery.page = 1;
      set[formName].validate((valid) => {
        if (valid) {
          if (this.formLabelAlign.bName != "") {
            this.listQuery.bName = this.formLabelAlign.bName;
          } else {
            this.listQuery.bName = undefined;
          }
          if (this.formLabelAlign.equipmentType != "") {
            this.listQuery.equipmentType = this.formLabelAlign.equipmentType;
          } else {
            this.listQuery.equipmentType = undefined;
          }
          if (this.formLabelAlign.sensorNo != "") {
            this.listQuery.sensorNo = this.formLabelAlign.sensorNo;
          } else {
            this.listQuery.sensorNo = undefined;
          }
          if (this.formLabelAlign.floor != "") {
            this.listQuery.floorId = this.formLabelAlign.floor;
          } else {
            this.listQuery.floorId = undefined;
          }
          if (this.formLabelAlign.positionDescription != "") {
            this.listQuery.positionDescription = this.formLabelAlign.positionDescription;
          } else {
            this.listQuery.positionDescription = undefined;
          }
          if (this.formLabelAlign.handlePerson != "") {
            this.listQuery.handlePerson = this.formLabelAlign.handlePerson;
          } else {
            this.listQuery.handlePerson = undefined;
          }
          this.isadvance = false;
          this.getList();
          set[formName].resetFields();
        }
      });
    },
    viewimg(row, floor) {
      this.buildId = row.buildId + "";
      this.newfloor = floor;
      this.realtimePointShow = true;
    },
    //重置查询表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.formLabelAlign.bName = "";
      this.formLabelAlign.equipmentType = "";
      this.isadvance = false;
    },
  },
  watch: {
    $route: "fetchData",
  },
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.calendar-list-container {
  .icon-nf-copy {
    cursor: pointer;
    position: relative;
    .icon-nf-copy-btn {
      position: absolute;
      opacity: 0;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }
  .filter-container {
    display: flex;
    justify-content: space-between;
    .title {
      color: rgb(129, 128, 128);
    }
  }
  .fire {
    color: #e4393c;
  }
  .break {
    color: #ffaf40;
  }
  .el-switch {
    height: 22px;
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-table th {
    background: #f5f7fa;
  }
  .search {
    float: right;
  }
  .img {
    cursor: pointer;
  }
  .search {
    //   position: absolute;
    //   right: 0;
    //   top: 30px;
    float: right;
  }
}
</style>
<style lang="scss" scoped>

.exceptionRecord_main {
  width: 99%;
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
  .exceptionRecord_main_left {
    width: calc(100% - 463px);
    height: 654px;
    .exceptionRecord_main_left_table {
      height: 400px;
      overflow: auto;
    }
  }
}
.borderContent {
  width: 443px;
  height: auto;
  // position: absolute;
  // right: 44px;
  // top: 130px;
  .borderContent_type {
    width: 443px;
    .border_message {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 20px;
      .border_message_num {
        width: 180px;
        height: 87px;
      }
    }
  }

  .borderContent_bottom {
    width: 443px;
    margin-top: 20px;
    .border_message {
      // width: 422px;
      width: 482px;
      margin-left: -30px;
      margin-right: -30px;
      margin-top: -30px;
      margin-bottom: -20px;
      // height: 187px;
      height: 237px;
    }
    .border_message2 {
      width: 422px;
      height: 150px;
      margin-top: 20px;
      .borderType_title {
        height: 20px;
        line-height: 20px;
        font-size: 18px;
        color: #afdaf1;
        // font-weight: bold;
      }
    }
  }
}
</style>

